<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String contextPath = request.getContextPath(); 
    request.setAttribute("contextPath", contextPath);%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>编辑客服</title>

    <!-- Bootstrap Core CSS -->
    <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${contextPath}/css/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${contextPath}/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${contextPath}/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!--common Css-->
    <link href="${contextPath}/css/common.css" rel="stylesheet">
    <!--serviceEdit Css-->
    <link href="${contextPath}/css/serviceEdit.css" rel="stylesheet">
    <link href="${contextPath}/iconfont/iconfont.css" rel="stylesheet">
</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <%@include file="nav.jsp"%>

        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-header">编辑客服</h3>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-6">
                                    <form role="form" class="form-horizontal" method="post" enctype="multipart/form-data" action="">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label" for="account1">账户</label>
                                            <div class="col-lg-10">
                                               <input type="text" class="form-control" id="account1" name="account1" value="${findByIdServer.data.account}" disabled>
                                            </div>
                                        </div>                                      
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">姓名</label>
                                            <div class="col-lg-10">
                                                <input type="text" class="form-control" id="serverName" name="serverName" value="${findByIdServer.data.serverName }">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="nickname" class="col-sm-2 control-label">昵称</label>
                                            <div class="col-lg-10">
                                                <input type="text" class="form-control" id="nickname" name="nickname" value="${findByIdServer.data.nickName }">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">手机</label>
                                            <div class="col-lg-10">
                                            <input type="text" class="form-control" id="phoneNum" name="phoneNum" value="${findByIdServer.data.phoneNum }">                             
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="password1" class="col-sm-2 control-label">初始密码</label>
                                            <div class="col-lg-10">
                                                <input type="password" class="form-control" id="password1" name="password1"  value="${findByIdServer.data.password}">
                                            </div>
                                        </div>                          
                                        <div class="form-group">
                                            <label for="serverType" class="col-sm-2 control-label">选择角色</label>
                                            <div class="col-lg-10">
                                                <select class="form-control" id="serverType" >
                                                <c:if test="${findByIdServer.data.serverType=='1'}">
                                                <option value="${findByIdServer.data.serverType}" >管理员</option>
                                                <option value="2" >普通客服</option>
                                                </c:if>
                                                <c:if test="${findByIdServer.data.serverType=='2'}">
                                                <option value="${findByIdServer.data.serverType}" >普通客服</option>
                                                <option value="1" >管理员</option>
                                                 </c:if>
                                            </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-sm-2" for="num">最大接待量</label>
                                            <div class="col-lg-10">
                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="num" name="num" value="${findByIdServer.data.maximum}">
                                                    <span class="input-group-addon">人</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-md-6 col-md-offset-3">
                                                <button type="button" class="btn btn-default" id="stn"  onclick="update(${findByIdServer.data.id});">提交</button>
                                                <button type="reset" class="btn btn-default">取消</button>
                                            </div>
                                    </form>
                                    </div>
                                </div>
                            </div>
                            <!-- /.row (nested) -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
            </div>
            <!-- /#page-wrapper -->

        </div>
        <!-- /#wrapper -->

        <!-- Modal -->
        <div class="modal fade" id="phoneInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">修改手机号码</h4>
                    </div>
                    <div id="notice">
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form" method="" action="">
                            <div class="form-group">
                                <div class="center-block">请输入要绑定手机号</div>
                            </div>
                            <div class="form-group">
                                <label for="newPhone" class="col-sm-2 control-label"></label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" id="newPhone" name="newPhone" placeholder="输入手机号">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label"></label>
                                <div class="col-sm-8">
                                    <button type="button" class="btn btn-primary btn-lg btn-block" id="next">下一步</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="verify" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">短信验证码</h4>
                    </div>
                    <div id="msgNotice">
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form" method="" action="">
                            <div class="form-group">
                                <div class="center-block" id="desc"></div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label"></label>
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="输入验证码">

                                        <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" id="countDown"></button>
                                </span>
                                    </div>
                                    <!-- /input-group -->
                                </div>
                                <!-- /.col-lg-6 -->
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label"></label>
                                <div class="col-sm-8">
                                    <button type="button" class="btn btn-primary btn-lg btn-block" id="sure">确定</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- jQuery -->
        <script src="${contextPath}/js/jquery.min.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="${contextPath}/js/bootstrap.min.js"></script>

        <!-- Metis Menu Plugin JavaScript -->
        <script src="${contextPath}/js/metisMenu.min.js"></script>

        <!-- Custom Theme JavaScript -->
        <script src="${contextPath}/js/sb-admin-2.min.js"></script>

        <!-- Page-Level Demo Scripts - Tables - Use for reference -->
        <script>
            $(function() {
                $('[data-toggle="popover"]').popover();

                $("#editPhone").click(function() {
                    $("#phoneInfo").modal('show');
                });

                //下一步点击事件
                $("#next").click(function() {
                    //验证是否输入手机号
                    var newPhone = $("#newPhone").val();
                    if (newPhone === '') {
                        var str = notice('请输入手机号码');
                        $("#notice").html(str);
                        setTimeout("$('div.alert-danger').alert('close')", 3000); //3秒警告框消失
                    } else {
                        $("#phoneInfo").modal('hide');
                        //手机号屏蔽中间四位
                        var phone = newPhone.substr(0, 3) + '****' + newPhone.substr(7)
                        var str = '验证码已经发送到以下手机,请注意查收<br/>';
                        str += phone;
                        $("#desc").html(str);
                        $("#verify").modal('show');

                        var countdown = 60;
                        var obj = $("#countDown");
                        setTime(obj);

                        function setTime(obj) {
                            if (countdown == 0) {
                                $(obj).attr("disabled", false);
                                $(obj).html("获取验证码");
                                countdown = 60;
                                return;
                            } else {
                                $(obj).attr("disabled", true);
                                $(obj).text(countdown + "s 重新发送");
                                countdown--;
                            }
                            setTimeout(function() {
                                setTime(obj)
                            }, 1000);
                        }
                    }
                });

                //点击再次发送
                $("#countDown").on('click', function() {
                    var countdown = 60;
                    var obj = $("#countDown");
                    setTime(obj);

                    function setTime(obj) {
                        if (countdown == 0) {
                            $(obj).attr("disabled", false);
                            $(obj).html("获取验证码");
                            countdown = 60;
                            return;
                        } else {
                            $(obj).attr("disabled", true);
                            $(obj).text(countdown + "s 重新发送");
                            countdown--;
                        }
                        setTimeout(function() {
                            setTime(obj)
                        }, 1000)
                    }
                });

                //点击确定
                $("#sure").click(function() {
                    notice(111);
                    $.ajax();
                });

                //提示信息封装函数
                

              
            })
        
            function notice(notice) {
                    var str = '';
                    str += '<div class="popupTip" style="padding-right:20px">';
                    str += notice;
                    str += '<span class="iconfont icon-quxiao remove"></span>';
                    str += '</div>';
                    str += '</strong></div>';
                    //wrapper插入str
                    $("#wrapper").append(str);
                }
            //取消提示框
            $("#wrapper").on('click', '.remove', function(){
                $(".popupTip") .hide();
            });
            
            //提交事件
            function update(id){
            	    $(".popupTip").remove();
            		var account = $("#account1").val();
            		if(account===''){
            			alert('账户名不能为空');
            			return false;
            		}
            		var reg = /^[0-9a-zA-Z]{3,14}$/ ;
            		if(!reg.exec(account)){
            			alert('账号只能输入英文和数字3到14位');
            			  return;
            		}
            		
            		var serverName = $("#serverName").val();
            		
            		if(serverName===''){
            			alert('姓名不为空');
            			return false;
            		}
            		
            		var nickName =$("#nickname").val();
            		
            		if(nickName === ''){
            			alert('昵称不能为空');
            			return false;
            		}
            		
            		var password =$("#password1").val();
            		if(password.length!=32){              
            		   if(password ===''){
            			alert('密码不能为空');
            			return false;
            		}
            		var myrg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{10,20}$/;
            		if(!myrg.test(password)){
            			alert('密码只能输入10到20为数字和字母组合');    
            			return;
            		 }
            		
            		}
            		
            		var phoneNum = $("#phoneNum").val();
            		var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
       			    if(phoneNum ===''){
       			    	alert('手机号不能为空');
            			return false;
       			    }
            		if(!myreg.test(phoneNum)){
       				 alert('你输入的 手机号不正确');
       				 return;
         		 }
            		
            		var serverType = $("#serverType").val();
            		
            		var maximum =$("#num").val();
            		
            		if(maximum ===  ''){
            			alert('最大接待量不能为空');
            			return false;
            		}
            		 var eg=/^\d{1,3}$/;
              		if(!eg.test(maximum)){
              			alert('最大接待量只能输入数字1到3位');
              			return;
              		}
            		
            		 $.ajax({
             			type:'post',
         				url:'${contextPath}/WebManager/manage/updateserver',
         				data:"{\"id\":\""+id+"\",\"account\":\""+account+"\",\"serverName\":\""+serverName+"\",\"nickName\":\""+nickName+"\",\"phoneNum\":\""+phoneNum+"\",\"password\":\""+password+"\",\"serverType\":\""+serverType+"\",\"maximum\":\""+maximum+"\"}",
         				dataType:'json',
         				contentType: "application/json;charset=utf-8",
         				success:function(data){
         					if(data.status != 1){
         						window.location.href = '${contextPath}/WebManager/manage/serverList?pageNow=1';
        	 				}else if(data.message==='请输入不超过7个汉字或1-14个英文的姓名'){
        	 					notice("请输入不超过7个汉字或1-14个英文的姓名!");
        	 				}else if(data.message==='请输入不超过7个汉字或1-14个英文的昵称 '){
        	 					notice("请输入不超过7个汉字或1-14个英文的昵称!");
        	 				}else if(data.message==='密码超出了设置规则，请在10-20位数字和字母组合'){       	 					
        	 					notice("密码超出了设置规则请在10-20位数字和字母组合");
        	 					
        	 				}else if(data.message==='修改失败'){
        	 					notice("修改失败!");
        	 				}
         					
         				},
             		}); 
            	}
          
            </script>

</body>

</html>